<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="app">
        <my-head></my-head>
        <h2>我是根组件结构1</h2>
    </div>
    <script>

        let RootApp = {
            data(){
                return {
                }
            },
            //优先级高于根组件1，有则覆盖，无则显示根组件1
            template: `
              <h2>我是根组件结构2</h2>
          `
        }

        let MyHead = {
            template: `
            <header>
              <div>{{ message }}</div>
              <h2>logo</h2>
              <ul>
                <li>首页</li>
                <li>视频</li>
                <li>音乐</li>
              </ul>
            </header>
          `
        }

        let app = Vue.createApp(RootApp)
        app.component('my-head', MyHead );

        let vm = app.mount('#app');
    </script>
</body>
</html>